 // 图片数据
 const imgs = [{
    s:"./imgs/goods1.jpg",
    m:"./imgs/goods1.jpg",
    l:"./imgs/goods1.jpg",
},{
    s:"./imgs/goods1-2.jpg",
    m:"./imgs/goods1-2.jpg",
    l:"./imgs/goods1-2.jpg",
},{
    s:"./imgs/goods1-3.jpg",
    m:"/imgs/goods1-3.jpg",
    l:"/imgs/goods1-3.jpg",
}];

// 点击小图切换中图和大图
function Tab(){
    this.li = document.querySelectorAll(".box li");
    this.sImg = document.querySelector(".small_box img");
    this.bImg = document.querySelector(".big_box img");
    this.data = imgs;
    this.index = 0;
    this.addEvent();
}
Tab.prototype.addEvent = function(){
    const that = this;
    for(let i=0;i<this.li.length;i++){
        this.li[i].xuhao = i;
        this.li[i].onclick = function(){
            that.hide();
            that.getIndex(this);
        }
    }
}
Tab.prototype.hide = function(){
    this.li[this.index].className = "";
}
Tab.prototype.getIndex = function(now){
    this.index = now.xuhao;
    this.show();
}
Tab.prototype.show = function(){
    this.li[this.index].className = "active";
    this.sImg.src = this.data[this.index].m;
    this.bImg.src = this.data[this.index].l;
}
new Tab();


 // 放大镜功能
class Magnifier{
    constructor(){
        // 获取元素
        this.sBox = document.querySelector(".small_box");
        this.sSpan = document.querySelector(".small_box span");
        this.bBox = document.querySelector(".big_box");
        this.bImg = document.querySelector(".big_box img");
        // 执行绑定事件
        this.addEvent();
    }
    move(ops){
        // 移动
        // 计算鼠标移动的真实位置
        let l = ops.x - this.sSpan.offsetWidth/2;
        let t = ops.y - this.sSpan.offsetHeight/2;
        // 边界限定
        if(l < 0) l = 0;
        if(t < 0) t = 0;
        if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
            l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
        }
        if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
            t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
        }

        // 遮罩层跟随鼠标移动
        this.sSpan.style.left = l + "px";
        this.sSpan.style.top = t + "px";

        // 根据遮罩层移动的距离计算比例
        const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
        const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
        // 根据比例计算右侧大图的移动距离
        this.bImg.style.left = -x * (this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
        this.bImg.style.top = -y * (this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
    }
    init(){
        // 补全布局
        // 如果DOM元素在css中被设置display:none，那么在js中无法获取才元素的信息
        // console.log(this.bBox.offsetWidth, this.bImg.offsetWidth);
        this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";

        this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
    }
    addEvent(){
        const that = this;
        // 绑定事件
        // 进入
        // this.sBox.onmouseover   会触发事件冒泡
        // this.sBox.onmouseenter  不会触发事件冒泡
        this.sBox.onmouseenter = function(){
            // 执行显示
            that.show();
        }
        // 离开
        this.sBox.onmouseleave = function(){
            // 执行隐藏
            that.hide();
        }
        // 移动
        this.sBox.onmousemove = function(eve){
            const e = eve || window.event;
            // 利用相对于页面的坐标，计算出真实的位置
            // const pos = {
            //     x:e.pageX,
            //     y:e.pageY
            // };

            // 利用布局，让鼠标不会移动到span身上
            const pos = {
                x:e.offsetX,
                y:e.offsetY
            };

            // 执行移动
            that.move(pos);
        }
    }
    show(){
        // 显示
        this.sSpan.style.display = "block";
        this.bBox.style.display = "block";
        // 执行补全布局
        this.init();
    }
    hide(){
        // 隐藏
        this.sSpan.style.display = "none";
        this.bBox.style.display = "none";
    }
}

new Magnifier();




